<script setup lang="ts">
const category = [
  {
    id: 1,
    type: '1',
    title: '介绍',
    src: 'index_category_introduce',
    url: '/pages/introduce/introduce',
  },
  { id: 2, type: '2', title: '购票', src: 'index_category_ticket', url: '/pages/ticket/ticket' },
  {
    id: 3,
    type: '3',
    title: '农产品',
    src: 'index_category_product',
    url: '/pages/products/products',
  },
  {
    id: 4,
    type: '4',
    title: '环保打卡',
    src: 'index_category_card',
    url: '/pages/card/card',
  },
]
</script>

<template>
  <view class="index-category">
    <navigator
      v-for="item in category"
      :key="item.id"
      class="category-item"
      :url="item.url"
      hover-class="none"
    >
      <image class="icon" :src="`/static/images/${item.src}.svg`"></image>
      <text class="text">{{ item.title }}</text>
    </navigator>
  </view>
</template>

<style lang="scss">
/* 前台类目 */
.index-category {
  margin: 0 20rpx; /* 设置边距 */
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 平均分布按钮 */
  min-height: 180rpx;
  background-color: #f5f5f5; /* 添加背景色 */
  //border: 1px solid #ddd; /* 添加边框 */
  //box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
  //border-radius: 20rpx; /* 添加圆角边框 */

  .category-item {
    width: 130rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {
      width: 80rpx;
      height: 80rpx;
    }

    .text {
      font-size: 26rpx;
      color: #333;
    }
  }

  .category-item-hover:active {
    transform: scale(0.95); /* 点击时缩小 */
  }
}
</style>
